<template>
  <div class="sort-container">
    <div class="sort-dance">
      <div class="sort-dance-code" :class="sortType === 1 ? 'sort-active' :''" @click="changeSortTypeComposite()">综合</div>
      <div class="sort-dance-code" :class="sortType === 2 ? 'sort-active' :''" @click="changeSortTypeSale()">销量</div>
      <div class="sort-dance-code" :class="sortType === 3 ? 'sort-active' :''" @click="changeSortType(3)">浏览量</div>
      <div  class="sort-dance-code" :class="isSortShow ? 'active' :''" @mouseenter="changeIsSortShow(true)" >
        价格
        <ele-ArrowDown  class="ele-ArrowDown">
        </ele-ArrowDown>
      </div>
        <div  class="price-sort" :class="!isSortShow ? 'active' :''" @mouseleave="changeIsSortShow(false)">
            <div class="price-sort-up" :class="isPriceActive ? 'price-active': '' " @mouseenter="isPriceActive = true" >价格由高到低</div>
            <div class="price-sort-down" :class="!isPriceActive ? 'price-active': ''"  @mouseenter="isPriceActive = false" >价格由低到高</div>
        </div>
      <div class="sort-dance-code" :class="sortType === 4 ? 'sort-active' :''" @click="changeSortType(4)">发布时间</div>
      </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"SortComponents",
})
</script>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {useLiveStore} from "@/store/modules/live";
const LiveStore = useLiveStore()
const {getSalesSort,getSortList} =LiveStore
const isSortShow = ref(false)
const isPriceActive = ref(false)
const sortType = ref(1)
const changeIsSortShow = (n:boolean)=>{
    isSortShow.value = n
    isPriceActive.value = n
}
const changeSortType = (n:number)=>{
    sortType.value = n
}
const changeSortTypeComposite = async ()=>{
    sortType.value = 1
    await getSortList()
}
const changeSortTypeSale = async ()=>{
    sortType.value = 2
    await getSalesSort()
}
onMounted(()=>{
    getSortList()
})
</script>

<style scoped lang="scss">
.sort-container{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7f9;
  min-width: 1200px;
  .sort-dance{
    position: relative;
    border-radius: 4px;
    background: #fff;
    margin: 0 0px 10px 0px;
    padding-left: 20px;
    width: 1180px;
    height: 70px;
    display: flex;
    justify-content: left;
    align-items: center;
    .active{
      visibility: hidden;
    }
    .ele-ArrowDown{
      margin-left: 5px;
      width: 10px;
      height: 10px;
    }
    .price-sort{
      position: absolute;
      box-shadow:2px 0 9px rgb(0 0 0 / 10%);
      border-radius: 4px;
      background-color: #ffffff;
      top:20px;
      left: 313px;
      z-index: 1;
      width: 130px;
      height: 100px;
      margin-right: 20px;
      .price-active{
        color: #f93684;
      }
      .price-sort-up{
        font-size:14px;
        text-align: center;
        cursor: pointer;
        width: 120px;
        padding: 17px 0;
      }
      .price-sort-down{
        font-size:14px;
        text-align: center;
        cursor: pointer;
        width: 120px;
        padding: 17px 0;
      }
    }
    .sort-dance-code{
      font-size: 14px;
      color:#7d8090;
      margin-right: 80px;
    }

    .sort-active{
      color: #f93684;
    }
  }
}
</style>
